﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Game.aspx.cs" Inherits="JsGameExample01.Game" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JS GameDev - Example 01</title>
    <script type="text/javascript" src="Scripts/easeljs-0.5.0.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var canvas;
        var stage;
        var screen_width;
        var screen_height;
        var bmpAnimation;
        var bmpAnimationIdle;

        var numberOfImagesLoaded = 0;

        var imgMonsterARun = new Image();
        var imgMonsterAIdle = new Image();

        function init() {
            canvas = document.getElementById("testCanvas");

            imgMonsterARun.onload = handleImageLoad;
            imgMonsterARun.onerror = handleImageError;
            imgMonsterARun.src = "Images/MonsterARun.png";

            imgMonsterAIdle.onload = handleImageLoad;
            imgMonsterAIdle.onerror = handleImageError;
            imgMonsterAIdle.src = "Images/MonsterAIdle.png";
        }

        function reset() {
            stage.removeAllChildren();
            createjs.Ticker.removeAllListeners();
            stage.update();
        }

        function handleImageLoad(e) {
            numberOfImagesLoaded++;

            if (numberOfImagesLoaded == 2) {
                numberOfImagesLoaded = 0;
                startGame();
            }
        }

        function startGame() {
            stage = new createjs.Stage(canvas);

            screen_width = canvas.width;
            screen_height = canvas.height;

            var spriteSheet = new createjs.SpriteSheet({
                images: [imgMonsterARun],
                frames: { width: 64, height: 64, regX: 32, regY: 32 },
                animations: {
                    walk: [0, 9, "walk", 4]
                }
            });

            var spriteSheetIdle = new createjs.SpriteSheet({
                images: [imgMonsterAIdle],
                frames: { width: 64, height: 64, regX: 32, regY: 32 },
                animations: {
                    idle: [0, 10, "idle", 4]
                }
            });

            createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);

            bmpAnimation = new createjs.BitmapAnimation(spriteSheet);
            bmpAnimation.regX = bmpAnimation.spriteSheet.frameWidth / 2 | 0;
            bmpAnimation.regY = bmpAnimation.spriteSheet.frameHeight / 2 | 0;

            bmpAnimation.gotoAndPlay("walk_h");

            bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

            bmpAnimation.name = "monster1";
            bmpAnimation.direction = 90;
            bmpAnimation.vX = 1;
            bmpAnimation.vY = 0;
            bmpAnimation.x = 16;
            bmpAnimation.y = 32;

            bmpAnimationIdle = new createjs.BitmapAnimation(spriteSheetIdle);

            bmpAnimationIdle.name = "monsteridle1";
            bmpAnimationIdle.x = 16;
            bmpAnimationIdle.y = 32;

            bmpAnimation.currentFrame = 10;
            stage.addChild(bmpAnimation);

            createjs.Ticker.addListener(window);
            createjs.Ticker.useRAF = true;
            createjs.Ticker.setFPS(60);
        }

        function handleImageError(e) {
            console.log("Error Handling Image: " + e.target.src);
        }

        function tick() {
            if (bmpAnimation.x >= screen_width - 16) {
                bmpAnimation.direction = -90;
                bmpAnimation.gotoAndPlay("walk");
            }

            if (bmpAnimation.x < 16) {
                bmpAnimation.direction = 90;
                bmpAnimation.gotoAndStop("walk");
                stage.removeChild(bmpAnimation);
                bmpAnimationIdle.gotoAndPlay("idle");
                stage.addChild(bmpAnimationIdle);
            }

            if (bmpAnimation.direction == 90) {
                bmpAnimation.x += bmpAnimation.vX;
                bmpAnimation.y += bmpAnimation.vY;
            }
            else {
                bmpAnimation.x -= bmpAnimation.vX;
                bmpAnimation.y -= bmpAnimation.vY;
            }

            stage.update();
        }
    </script>
    
    <div class="description">
    </div>
    <div class="canvasHolder">
        <canvas id="testCanvas" width="240" height="64" style="background-color:#607559">
            Your browser doesn't support canvas. Please download IE9+ on <a href="http://ie.microsoft.com/testdrive">IE Test Drive</a> 
        </canvas>
    </div>
    <button id="start" onclick="init()">Start</button>
    <button id="reset" onclick="reset()">Reset</button>

</body>
</html>
